<template>
    <div class="icon-view">
      <component :is="iconName" v-bind="props" :style="{ width: iconSize, height: iconSize, color: color }"
        class="icon" />
    </div>
  </template>

  <script lang="ts" setup>
  import * as icon from '@element-plus/icons-vue'

  type IconName = keyof typeof icon
  const props = withDefaults(
    defineProps<{
      name: IconName
      iconSize?: string
      color?: string
    }>(),
    {
      iconSize: '1em',
    },
  )

  const iconName = icon[props.name!]
  </script>

  <style lang="scss">
  .icon-view {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    .icon {
      display: inline;
      margin: 0 2%;
      color: var(--el-text-color-primary);
    }
  }
  </style>